<template>
 <div class="registerPage" ref="registContent">
        <div class="topBox topTitleBox">
            <span class="passwordLogin activeSpan">
            注&nbsp;&nbsp;&nbsp;&nbsp;册
            </span>
            
        </div>
        <div class="inputBox">
            <el-form :model="form" :rules="rules" ref="form" @submit.native.prevent>
              <el-form-item label="" prop="userName" class="registerInput" style="margin-bottom:30px;"
                :rules="[
                    { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },
                  ]"
                >
                <el-input type="text" name="" id="" class="commonInput" placeholder="用 户 名     USER NAME" v-model="form.userName" ></el-input>
              </el-form-item>

              <el-form-item label="" prop="sex" class="registerInput" style="margin-bottom:30px;"
                :rules="[
                    { required: true, message: '性别不能为空', trigger: ['blur', 'change'] },
                  ]"
                >
                <div class="selectDiv">
                  <el-select class="registerSelect" v-model="form.sex" >
                    <el-option
                      v-for="item in sexList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>

              <el-form-item label="" prop="phoneNum" class="registerInput" style="margin-bottom:30px;">
                <el-input type="text" name="" class="commonInput"  placeholder="手 机 号     PHONE NUMBER" v-model="form.phoneNum" ></el-input>
              </el-form-item>

              <el-form-item label="" prop="passwordNum" class="registerInput" style="margin-bottom:30px;"
                :rules="[
                    { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
                  ]"
                >
                <el-input type="password" name="" class="commonInput" placeholder="密 码          PASSWORD" v-model="form.passwordNum"></el-input>
              </el-form-item>

              <el-form-item label="" prop="repeatPsd" class="registerInput" style="margin-bottom:30px;">
                <el-input type="password" name="" class="commonInput" placeholder="重 复 密 码  PASSWORD" v-model="form.repeatPsd" ></el-input>
              </el-form-item>
            </el-form>
            
            <div class="errmsg">
              <span class="errMessage">{{errMsg}}</span>
            </div>
            
            <!-- <div class="radioBtn">
                <el-radio class="registerRadio" v-model="radio" label="1" text-color="#ccc">个人</el-radio>
                <el-radio class="registerRadio" v-model="radio" label="2" text-color="#ccc">公司</el-radio>
            </div> -->
            
        </div>

        <div class="bottomBox">
          <router-link to="/login"><common-btn class="loginBtn" :loginName = 'loginName'></common-btn></router-link>
          <common-btn class="registeBtn active-btn" :loginName = 'registeName' @handleLogin='handleLogin'></common-btn> 
        </div>
    </div>
    
</template>

<script>
import "../../../css/select.css"
import comFun from "../../../commonFunction/common.js"
import Axios from 'axios'
import CommonBtn from '../../../components/commonBtn.vue'
export default {
    data(){
      var checkPsd = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('重复密码不能为空'));
          } else if (value !== this.form.passwordNum) {
              callback(new Error('两次输入密码不一致!'));
          } 
          else {
              callback();
          }
      };
      return{
        loginName: '登  陆',
        registeName: '注  册',
        sexList:[{
          value: '2',
          label: '男'
        },{
          value: '1',
          label: '女'
        }],
        rules: {
          repeatPsd: [
            { validator:checkPsd, trigger: ['blur', 'change'] }
          ],
          // passwordNum: [
          //   { validator: validatePass2, trigger: 'blur' }
          // ],
          phoneNum: [
            { validator: comFun.checkPhone, trigger: ['blur', 'change'] }
          ]
        },
        form:{
          rolevalue:4, // 角色
          userName:"", // 用户名
          sex:"2", // 性别
          phoneNum:"", // 手机号
          passwordNum:"", // 密码
          repeatPsd:"", // 重复密码
        },
        radio:"1", // 类型选择（备用）
        errMsg:"", // 错误信息
        resultMsg:"", // 备用字段
        clientHeight:"",
      }
    },
    created(){},
    mounted(){
      // 获取浏览器可视区域高度
      this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
    },
    methods:{
      handleLogin (val) {
          // 判断信息是否完整
          if(this.form.passwordNum === this.form.repeatPsd && this.form.phoneNum && this.form.passwordNum && this.form.userName && this.form.sex){
            // 验证手机号格式
            // var phoneFlag = this.$common.checkPhone(this.form.phoneNum);
            // if(phoneFlag){
              
            // }
            this.$refs['form'].validate((valid) => {
              if(valid){
                // 用户注册信息
                this.errMsg = "" 
                this.form.roleId = [];
                this.form.orgId = ["01"]
                this.form.roleId.push(this.form.rolevalue)
                // 存在本地
                sessionStorage.registerParams = JSON.stringify(this.form)
                // 发送注册请求 验证手机号
                this.$api.registerSendPCode({params:{phone:this.form.phoneNum}}).then(result=>{
                  if(result.data.success){
                    // 发送成功，跳转到验证码输入界面
                    this.$router.push({
                      path: `/verification?phoneNum=${this.form.phoneNum}`,
                    })
                  }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                  }
                })
              }
            })
            
          }else if(!this.form.phoneNum || !this.form.passwordNum || !this.form.userName || !this.form.sex){
            this.$message({
              center: true,
              message: '请完善注册信息',
              type: 'warning'
            });
          }
      },
    },
    watch:{
      // clientHeight: function () {
      //   this.changeFixed(this.clientHeight)
      // },
      phoneNum:function(){
        if(this.phoneNum)this.errMsg = ""
      },
      passwordNum:function(){
        if(this.passwordNum)this.errMsg = ""
      }
    },
    components: {
      'common-btn': CommonBtn
    }
}
</script>

<style lang="scss" scoped>  
// 下拉框样式
@import '../../../css/select.css';
.registerPage{
    width: 60%;
    height: 100%;
    margin:auto;
    .topBox{
      span{
        margin-left: 30px;
        &.passwordLogin:after{
            width: 66px;
            left: 32px;
        }
      }
    }
    .inputBox{
      margin-top:50px;
      #selectBtn{
        & option{
            border-radius: 10px;
            border:2px solid #fff;
            background: #D08B90;
            & option:hover{
                background:#ccc;
            }
        }
      }
      .selectDiv{
        .el-select{
          text-indent: none;
        }
      }
      input{
        height: 50px;
        margin-top: 20px;
        border-radius: 25px;
        &::-webkit-input-placeholder {
          color: #fff;
        }
        &:nth-child(1){
          margin-top: 0;
        }
      }
      .errmsg{
        height: 30px;
        line-height: 30px;
        margin-left: 20px;
      }
      span.errMessage{
        font-size: 16px;
        font-family: 'Microsoft Yahei';
        font-weight: bold;
        color: #DC1937;
      }
    }
    .radioBtn{
        margin-left: 30px;
        margin-top: 15px;
    }
  }

  
</style>